<template>
  <div class="headerPanel">
    <el-container>
      <el-aside class="w60 h80 pt20">
        <img
          data-v-2d2bbdc2=""
          :src="form.headImg"
          class="img"
        />
      </el-aside>
      <el-container class="pt10">
        <el-header class="h40 fb fs24">{{form.greetings}}</el-header>
        <el-main class="ptb10 fs14 vm">
          <!-- <div class="vm pr20">{{form.apartmentName}}</div> -->
          <div class="vm pr10">{{form.roleName}}</div>
          <div class="vm pr10">|</div>
          <div class="vm">{{form.apartmentName}}</div>
        </el-main>
      </el-container>
      <el-container class="ptb10 vm tr">
        <el-main class="ptb10 vm tr">
          <div class="fs18">团队内排行</div>
          <div v-if="+form.rank > 0">
            <div class="fs22 fb vm h20 rank">{{form.rank}}</div>
            <div class="vm fs16 vb">/</div>
            <div class="vm fs16 vb">{{form.rankTotal}}</div>
          </div>
          <div v-else>
            暂无排行
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {baseInfo} from '@/api/src/workbench'
export default {
  components: {},
  data () {
    return {
      form: {

      }
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      this.form = await baseInfo()
    }
  }
}
</script>

<style scoped lang="scss">
.headerPanel {
  background: #fff;
  margin: 0.57rem 0;
  padding: .75rem 1.75rem;
  .img {
    width: 3.22rem;
    height: 3.22rem;
    border-radius: 50%;
  }

}
.rank {
    vertical-align: initial;
  }
</style>
